<template>
  <view class="detail-container" :style="'height: calc(100vh - ' + barHeight * 2 + 'rpx)'">
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view>
        <ve-card
          :title="'违章记录' + (index + 1)"
          v-for="(record, index) in dataSource"
          :key="record.violantionCode"
          type="none"
          fold
          :defaultFold="index == 0 ? true : false"
        >
          <RecordTags v-if="record.violationLabelList.length > 0" :list="record.violationLabelList" />
          <ve-cell label="违章单号">{{ record.violantionCode || '-' }}</ve-cell>
          <ve-cell label="车牌号">{{ record.licenseNo || '-' }}</ve-cell>
          <ve-cell label="归属门店">{{ record.siteName || '-' }}</ve-cell>
          <ve-cell label="违章时间">{{ record.eventTime || '-' }}</ve-cell>
          <ve-cell label="违章城市">{{ record.eventCityName || '-' }}</ve-cell>
          <ve-cell-val label="罚分" :value="record.eventScore" unit="分" />
          <ve-cell-price label="罚款" :value="record.eventAmount" />
          <ve-cell label="处理方">{{ record.handleTypeName || '-' }}</ve-cell>
          <ve-cell-price label="代办服务费" :value="record.handleAmount" />
          <ve-cell label="违章状态">{{ record.eventStatusStr || '-' }}</ve-cell>
          <ve-cell-val label="费用状态" :value="record.violationFeeStateName" />
          <ve-cell-val label="催缴状态" :value="record.urgePayStatusName" />
          <ve-cell label="负责人">{{ record.staffName || '-' }}</ve-cell>
        </ve-card>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import RecordTags from '@/pages/asset/car-violation/components/record-tags.vue'

  import { onMounted, ref } from 'vue'
  import useList from '@/hooks/useList'

  const barHeight = ref(0)
  const props = defineProps({
    orderId: [String, Number],
    orderType: {
      type: String,
      default: '2', //  2短租 3长租
    },
  })

  // 查询参数
  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/violation/getList',
    queryParam,
  )

  onMounted(() => {
    queryParam.value = {
      orderId: props.orderId,
      violationTimeType: 1,
      pageSize: 10,
      orderType: props.orderType,
    }
    loadData()
    // 获取滑动高度
    uni.getSystemInfo({
      success: function (res) {
        console.log(res.statusBarHeight)
        barHeight.value = res.statusBarHeight
      },
    })
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
</style>
